<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<meta name="format-detection" content="telephone=no" /> 
<link rel="shortcut icon" href="images/logo.ico" />
<title>中科家政</title>
<meta name="keywords" content=" " />
<meta name="description" content=" " />


<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/swiper-3.4.1.min.css">
<link rel="stylesheet" type="text/css" href="css/iosSelect.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css">

<style tyle="">
    
</style>

<script>
        var _hmt = _hmt || [];
        (function() {
        var hm = document.createElement("script");
        hm.src = "//hm.baidu.com/hm.js?b25bf95dd99f58452db28b1e99a1a46f";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
        })();
</script>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/easing.js"></script>
<script src="js/swiper-3.4.1.min.js"></script>
<script src="js/index.js"></script>
<script src="js/main.js"></script>

<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/axios-config.js"></script>
<script src="./js/js.cookie.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/layui/layui.js"></script>

<style>
  .stroy_join_sec4_list{
    position: relative;
  }
  .stroy_join_sec4_list input{
    position: absolute;
    width:100%;
    height: 100%;
    top:0;
    left:0;
    filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
    z-index: 10;
  }
  #picUpDemo img{
      width: 25%;
  }
  .layui-upload-list{
      margin: 10px 0;
      padding: 0 15px;
  }
</style>

</head>

<body class="bg-2">

<div id="app" v-cloak>

<!--  / header  -->
<div class="stroy_rhead">
  <a href="javascript:history.go(-1)" class="back">
    <img src="images/hl.png"> 返回
  </a>
  <h5>撰写老故事</h5>
  <a class="offside" href="##" style="font-size: 0.15rem;" id="sendTale" >发布</a>
</div>

<!--  / header  -->
<!--  / warpper  -->
<div class="warpper warpper_padt">
	
	<div class="stroy_join">
	  	<div class="stroy_join_list stroy_join_list3">
	  		发布类型
	  		<span>
	  		
	  		<div class="form-item item-line stroy_join_list1">                                  
			    <div class="pc-box">                     
			        <input type="hidden" name="bank_id" id="bankId" value="">                     
			        <span id="showBank">匠心技艺</span>  
			    </div>             
            </div>
	  		<i class="fa fa-angle-right"></i></span>
	  	</div>
	  	<div class="stroy_join_list stroy_join_list_city">
	  		所在城市
	  		<span>杭州<i class="fa fa-angle-right"></i></span>
	  	</div>
	  	
	  	<div class="stroy_join_list">
	  		故事标题
	  		<input type="text" placeholder="输入标题最多个12个字" v-model="title1">
	  	</div>
	  	<div class="stroy_join_sec4">
	  		<div class="stroy_join_sec4_list">
	  			<img src="images/xiangji.png" alt="">
	  			<br>
	  			<span>添加图片</span>
	  			<span>(最多6张)</span>
                <input name="file" type="file" accept="image/png,image/gif,image/jpeg" id="picUp">
	  		</div>
          </div>
          
        <div class="layui-upload">
            <div class="layui-upload-list" id="picUpDemo"></div>
        </div>

	  	<div class="stroy_join_sec5">
	  		<textarea placeholder="(在此处填写您的故事,限1200字以内)" class="commentArea1" v-model="collect1"></textarea>
	  	</div>
	  	
    </div>
</div>
<!--  / warpper  -->
  

<!--  / footer  -->
<!--  / footer  -->

</div>

</body>
<script src="js/bank.js"></script>
<script src="js/iosSelect.js"></script>
<script>
$(window).ready(function(){

    var vm = new Vue({
        el:"#app",
        data(){
          return{
            stroy_allList:[],
            title1:'',
            collect1:'',
            file1:'',
          }
        },
        created:function(){
          var $this = this;
        
            Vue.nextTick(function(){
                layui.use('upload', function(){
                    var upload = layui.upload;
                    //执行实例
                    var uploadInst = upload.render({
                        elem: '#picUp',
                        url: '/Api/Oldstory/issue',
                        auto: false, //选择文件后不自动上传
                        bindAction: '#sendTale', //指向一个按钮触发上传
                        multiple: true,
                        number: 6,
                        data:{
                            title: $this.title1,
                            cate_id: getCookie("cateId"),
                            city: getCookie("cityLocation"),
                            collect: $this.collect1,
                            token: getCookie("token")
                            // file: $this.file1
                        },
                        choose: function(obj){
                            //将每次选择的文件追加到文件队列
                            $this.file1 = obj.pushFile();
                            //预读本地文件示例，不支持ie8
                            obj.preview(function(index, file, result){
                                $('#picUpDemo').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                            });
                        },
                        allDone: function(res){
                            console.log(getCookie("cateId")+'--'+$this.file1)
                            alert('成功');
                        },
                        error: function(err){
                            // console.log(err)
                        }
                    });
                });
            })
        },
        mounted:function(){
        //   getData();
        //   imgSend();
        },
        methods:{
          //全部老故事列表
          update:function(){
            var $this = this;
            const data = {
                cate_id:getCookie("cateId"),
                city:getCookie("cityLocation"),
            }
            Axios.post(window.Url.stroy_allList,data).then((res) => {
              
              if(res.result == 1){
                $this.stroy_allList = res.info.oldstory;                                 
              }else
              {
                console.log("全部老故事列表:"+res.info);
              }
              
            }).catch((err) => {
              console.log("全部老故事列表:"+err);
            })
          
          },
          
          fabu:function(){
            var $this = this;
            const data = {
                title:'',
                city:'',
                file:''
            }
            Axios.post(window.Url.stroy_issue,data).then((res) => {
              
              if(res.result == 1){
                $this.stroy_allList = res.info.oldstory;                                 
              }else
              {
                console.log("全部老故事列表:"+res.info);
              }
              
            }).catch((err) => {
              console.log("全部老故事列表:"+err);
            })
          }
         
        }

    })


    


    // function getData(){
    //   var showBankDom = document.querySelector('#showBank');
    //   var bankIdDom = document.querySelector('#bankId');
    //   showBankDom.addEventListener('click', function () {
    //       var bankId = showBankDom.dataset['id'];
    //       var bankName = showBankDom.dataset['value'];
    //       var bankSelect = new IosSelect(1, 
    //           [data],
    //           {
    //               container: '.container',
    //               title: '',
    //               itemHeight: 50,
    //               itemShowCount: 3,
    //               oneLevelId: bankId,
    //               callback: function (selectOneObj) {
    //                   bankIdDom.value = selectOneObj.id;
    //                   showBankDom.innerHTML = selectOneObj.value;
    //                   showBankDom.dataset['id'] = selectOneObj.id;
    //                   showBankDom.dataset['value'] = selectOneObj.value;
    //               },
    //               fallback: function () {
    //                   console.log(1);
    //               },
    //               maskCallback: function () {
    //                   console.log(2);
    //               }
    //       });
    //   });
    // }


    // function imgSend(){      
    //   document.getElementById('headImage').addEventListener('tap', function() {
    //       if (mui.os.plus) {
    //           var buttonTit = [{
    //               title: "拍照"
    //           }, {
    //               title: "从手机相册选择"
    //           }];
              
    //           plus.nativeUI.actionSheet({
    //               title: "上传图片",
    //               cancel: "取消",
    //               buttons: buttonTit
    //           }, function(b) { /*actionSheet 按钮点击事件*/
    //               switch (b.index) {
    //                   case 0:
    //                       break;
    //                   case 1:
    //                       getImage(); /*拍照*/
    //                       break;
    //                   case 2:
    //                       galleryImg();/*打开相册*/
    //                       break;
    //                   default:
    //                       break;
    //               }
    //           })
    //       }        
    //   }, false);
    // }

    
    // // 拍照获取图片
    // function getImage() {
    //   var c = plus.camera.getCamera();
    //   c.captureImage(function(e) {
    //       plus.io.resolveLocalFileSystemURL(e, function(entry) {
    //         var imgSrc = entry.toLocalURL() + "?version=" + new Date().getTime(); //拿到图片路径
            
    //           setHtml(imgSrc);
    //       }, function(e) {
    //           console.log("读取拍照文件错误：" + e.message);
    //       });
    //   }, function(s) {
    //       console.log("error" + s);
    //   }, {
    //       filename: "_doc/camera/"
    //   })
    // }
    
    // // 从相册中选择图片
    // function galleryImg(){
    //   // 从相册中选择图片
    //     plus.gallery.pick( function(e){
    //       for(var i in e.files){
    //         var fileSrc = e.files[i]
    //         setHtml(fileSrc);
    //       }
    //     }, function ( e ) {
    //       console.log( "取消选择图片" );
    //     },{
    //       filter: "image",
    //       multiple: true,
    //       maximum: 5,
    //       system: false,
    //       onmaxed: function() {
    //         plus.nativeUI.alert('最多只能选择5张图片');
    //       }
    //     });
    // }

    // // 上传的方法
    // function upload(){
    //     var files = document.getElementById('testImg')
    //     MicroTaskGUID = common.guid();
        
    //     var rul = "服务器地址"
        
    //     var imgsArr = mui(".task-img");
        
    //     mui.each(imgsArr, function(index, item){
    // //    console.log(index)
    // //    console.log(item.src)
    //       createUp(item)
    //     })
      
      
    //   function createUp (files) {
    //       var task = plus.uploader.createUpload(url,
    //           {method:"POST"},
    //           function(t,status){ //上传完成
    //               if(status==200){
    //                 console.log("上传成功："+t.responseText);
    //               }else{
    //                   console.log("上传失败："+status);
    //               }
    //           }
    //       );
    //       //添加其他参数
    // //      task.addData("name","test");
    //       task.addFile(files.src,{key:files.src});
    //       task.start();
    //   }
    // }

  $('.stroy_join_list_city').click(function(){
  		window.location.href = "search.html";
  });
})  
</script>


</html>
